<template>
  <div>
    <head-view/>
    <div class="tong">
      <div class="serach ww" :style="{backgroundImage: 'url('+require('@/assets/images/bgc1.png')+')'
      ,backgroundRepeat: 'no-repeat'
      ,backgroundSize: '100% 100%'
      }">
        <span>气象搜索</span>
        <input type="search" name="" value="" placeholder="关键字搜索...">
      </div>
    </div>
    <div class="main ww">
      <div class="main_nav">
        <div class="nav_menu">
          <div class="nav_title"><img src="/maventest1/images/dq.png" alt=""> 地面勘测</div>
          <div class="nav_content">
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>

            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree">
            </el-tree>
            <!--            <a href="/maventest1/china" target="iframes" class="current">全国气候</a>-->
            <!--            <a href="/maventest1/guangxi" target="iframes">广西气候</a>-->
            <!--            <a href="/maventest1/sensor" target="iframes">温湿度</a>-->
            <!--            <a href="#">气压</a>-->
            <!--            <a href="#">其他</a>-->
          </div>
        </div>
      </div>
      <div class="main_item">
        <china_map ref="cmap"/>
      </div>
    </div>
    <footer-view/>
  </div>
</template>

<script>
  import HeadView from '@/components/HeadView/index'
  import FooterView from '@/components/FooterView/index'
  import {treeList} from '@/api/basics'
  import china_map from './china_map/index'

  export default {
    components: {HeadView, FooterView, china_map},
    data() {
      return {
        filterText: '',
        data: [],
        defaultProps: {
          children: 'children',
          label: 'areaName'
        }
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      initHttp() {
        let _this = this;
        treeList().then(response => {
          _this.data = response.data;
          _this.$refs.cmap.updateMap('china')
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.areaName.indexOf(value) !== -1;
      },
      handleNodeClick(data) {
        this.$refs.cmap.updateMap(data.areaKey)
      }
    },
    created() {
      this.initHttp();
    },
    mounted() {

    }
  };
</script>

<style scoped>
  /*main部分*/

  .main_nav {
    width: 20%;
    height: 100%;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
  }

  .nav_title {
    height: 50%;
    width: 100%;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;


  }

  .nav_content {
    width: 100%;
    height: 100%;
    background-color: #eee;

  }

  .nav_content > a {
    display: block;
    height: 50px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    font-size: 16px;
  }

  .nav_content > a:hover {
    display: block;
    height: 50px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #00A1D6;
  }

  .main {
    margin-top: 20px;
    height: 650px;
    /* background-color: pink; */
    display: flex;
  }


  .main_nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    font-size: 16px;
  }

  .main_nav ul li a:hover {
    background-color: #00A1D6;
    color: white;
  }

  .main_item {
    /* background-color: #C50FFC; */
    flex: 1;
  }

  .current {
    color: white;
    background-color: #00A1D6;
  }

</style>
